<template>
  <div id="app">
    <div class="box">
      <div class="title_box">
        <div class="title">账 户</div>
      </div>
      <div class="bigBox">
        <div class="number_logo">
          <div class="myAccount">我的账户<i class="el-icon-view"></i></div>
          <div class="number">{{ phoneNumber | phoneFilter }}</div>
        </div>
        <div class="logo">
          <div class="Logo1"><img src="初始化.png" alt="" />初始化</div>
        </div>
      </div>
      <div class="table1">
        <div class="card">
          <div class="left">
            <div class="totalAssets_key">资产总值</div>
            <div class="totalAssets_value">{{ totalAssets }}</div>
          </div>
          <div class="center">
            <div class="marketValue_key">证券市值</div>
            <div class="marketValue_value">{{ marketValue }}</div>
          </div>
          <div class="right">
            <div class="availableFunds_key">可用资金</div>
            <div class="availableFunds_value">{{ availableFunds }}</div>
          </div>
        </div>
      </div>
      <div class="accountCheck">
        <img src="火.png" alt="" class="huo_logo" />
        <div>账户检测</div>
      </div>
      <div class="table2">
        <div class="account_data">
          <div class="data_key"><i class="el-icon-lock"></i>冻结资金</div>
          <div class="data_value" style="color: #fcff00">
            {{ freezingFunds }}
          </div>
        </div>
        <div class="account_data">
          <div class="data_key"><i class="el-icon-money"></i>资金余额</div>
          <div class="data_value">{{ fundBalance }}</div>
        </div>
        <div class="account_data">
          <div class="data_key"><i class="el-icon-user"></i>账号</div>
          <div class="data_value">{{ phoneNumber | phoneFilter }}</div>
        </div>
        <div class="account_data">
          <div class="data_key"><i class="el-icon-edit-outline"></i>姓名</div>
          <div class="data_value" style="color: #ffffff">{{ Name }}</div>
        </div>
        <div class="account_data">
          <div class="data_key"><i class="el-icon-coin"></i>持仓市值</div>
          <div class="data_value">{{ marketValueOfPosition }}</div>
        </div>
        <div class="account_data">
          <div class="data_key" style="margin-bottom: 0">
            <i class="el-icon-data-line"></i>持仓利润
          </div>
          <div class="data_value" style="color: #ee0002">
            {{ positionProfit }}
          </div>
        </div>
      </div>
      <div class="table3">
        <div class="shanghai">
          <div class="big_title">上海股东</div>
          <div class="small_title">虚拟号码</div>
        </div>
        <div class="shenzhen">
          <div class="big_title">深圳股东</div>
          <div class="small_title">虚拟号码</div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <footer>
      <div class="menu1">
        <img src="账户.png" alt="" />
        <div>账户</div>
      </div>
      <div class="menu2">
        <img src="任务.png" alt="" />
        <div>任务</div>
      </div>
      <div class="menu3">
        <img src="交易.png" alt="" />
        <div>交易</div>
      </div>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      phoneNumber: '15030369800',
      totalAssets: '995941.47',
      marketValue: '149920.00',
      availableFunds: '846021.47',
      freezingFunds: '0.00',
      fundBalance: '846021.47',
      Name: '系统仿真账户',
      marketValueOfPosition: '159640.00',
      positionProfit: '3328.00'
    }
  },
  filters: {
    phoneFilter(val) {
      const reg = /^(.{9}).*(.{0})$/
      return val.replace(reg, '$1$2**')
    }
  }
}
</script>
<style>
#app {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 10rem;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(
    to bottom,
    #201e33 0%,
    #201e33 29%,
    #010017 30%,
    #010017 100%
  );
}
.box {
  flex: 1;
  padding-top: 0.853333rem;
}
footer {
  height: 1.6rem;
  display: flex;
  flex-direction: row;
}
.menu1 {
  flex: 2;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  margin-top: 0.266667rem;
  align-items: center;
  padding-left: 0.8rem;
}
.menu2 {
  flex: 1;
  display: flex;
  margin-top: 0.266667rem;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
}
.menu3 {
  flex: 2;
  display: flex;
  margin-top: 0.266667rem;
  flex-direction: column;
  padding-right: 0.8rem;
  align-items: center;
  color: #ffffff;
}
.title_box {
  height: 1.306667rem;
  align-items: center;
  width: 10rem;
  display: flex;
  flex-direction: row;
}
.title {
  color: #00ffff;
  margin: 0.133333rem auto 0.133333rem auto;
  font-size: 0.48rem;
}
.myAccount {
  display: flex;
  margin-left: 0.533333rem;
  padding-top: 0.413333rem;
  font-size: 0.32rem;
  color: #fefeff;
}
.el-icon-view {
  padding-top: 0.106667rem;
}
.number {
  color: #ffffff;
  margin-left: 0.533333rem;
  font-size: 0.586667rem;
}
.el-divider {
  margin: 0;
  height: 0.053333rem;
  background: #201e33;
}
.bigBox {
  display: flex;
  flex-direction: row;
}
.number_logo {
  display: flex;
  flex-direction: column;
}
.logo {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  margin-right: 0.4rem;
  margin-top: 0.533333rem;
  color: #ffffff;
}
.Logo1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
}
img {
  width: 0.56rem;
  height: 0.586667rem;
}
.table1 {
  margin: 0.8rem 0.4rem 0.4rem 0.4rem;
  height: 2.613333rem;
  border-radius: 0.266667rem;
  background: -webkit-linear-gradient(left, #ffb14c, #ff9e5a);
}
.card {
  display: flex;
  flex-direction: row;
  margin: 0;
}
.left,
.center,
.right {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  margin: 0.4rem;
  margin-top: 0.88rem;
}
.totalAssets_key,
.marketValue_key,
.availableFunds_key {
  font-size: 0.32rem;
  margin-bottom: 0.133333rem;
}
.totalAssets_value {
  font-size: 0.453333rem;
}
.marketValue_value,
.availableFunds_value {
  font-size: 0.453333rem;
  color: #ee0002;
}
.huo_logo {
  width: 0.413333rem;
  height: auto;
}
.accountCheck {
  display: flex;
  flex-direction: row;
  color: #ffffff;
  margin: 0.4rem;
  font-size: 0.32rem;
}
.table2 {
  margin: 0.8rem 0.4rem 0px 0.4rem;
  background-color: #201e33;
  color: #ffffff;
  letter-spacing: 0.053333rem;
  font-family: PingFang SC;
  margin-top: 0;
  font-size: 0.453333rem;
  border-radius: 0.266667rem;
}
.table3 {
  background-color: #201e33;
  margin: 0 0.4rem 0.053333rem 0.4rem;
  border-radius: 0.266667rem;
  height: 1.306667rem;
  display: flex;
  flex-direction: row;
}
.shanghai,
.shenzhen {
  flex: 1;
  display: flex;
}
.account_data {
  display: flex;
  margin: 0.053333rem;
}
.data_key {
  flex: 1;
  margin-left: 0.266667rem;
  margin-top: 0.266667rem;
  margin-bottom: 0.266667rem;
}
.data_value {
  flex: 1;
  text-align: right;
  margin-right: 0.266667rem;
  margin-bottom: 0.266667rem;
  margin-top: 0.266667rem;
}
.photo {
  width: 0.426667rem;
  height: auto;
}
.big_title {
  font-size: 0.453333rem;
  color: #ffffff;
  margin: 0.48rem 0.266667rem 0.533333rem 0.533333rem;
}
.small_title {
  font-size: 0.24rem;
  color: #fefefe;
  margin: 0.666667rem 0.266667rem 0.533333rem 0px;
}
</style>
